<!DOCTYPE html>
<html lang="{{.Locale}}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#fff">
    <title>{{.Title}}</title>
    <link rel="stylesheet" href="{{asset .Domain "/fonts/fonts.css" .ContextName}}">
    <link rel="stylesheet" href="{{asset .Domain "/css/cozy-bs.min.css" .ContextName}}">
    <link rel="stylesheet" href="{{asset .Domain "/styles/theme.css" .ContextName}}">
    <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
    {{.Favicon}}
  </head>
  <body class="cirrus">
    <main class="wrapper">
      <header class="wrapper-top d-flex flex-row align-items-center">
        {{if .BackButton}}
        <a href="{{.BackButton}}" class="btn btn-icon" aria-label="{{t "Back icon label"}}">
          <span class="icon icon-back"></span>
        </a>
        <div class="vertical-separator d-sm-none" role="separator"></div>
        {{end}}
        <a href="https://cozy.io/" class="btn p-2 d-sm-none">
          		<img src="{{asset .Domain "/images/logo-dark.svg"}}" alt="Twake Workplace" class="logo" />
        </a>
      </header>

      <div class="d-flex flex-column align-items-center mb-md-3">
        <h1 class="h4 h2-md mb-4 mb-md-5 text-center">{{t "Passphrase reset Title"}}</h1>
        {{if .HasHint}}
        <form id="send-hint-form" method="POST" action="/auth/hint" class="d-contents">
          <input type="hidden" name="redirect" value="{{.Redirect}}" />
          <button type="submit" class="alert alert-info d-flex align-items-center w-100 mb-2">
            <div class="me-3 flex-grow-1">
              <p class="text-start mb-2">
                {{t "Passphrase reset Submit hint"}}
              </p>
              <p class="text-start text-muted caption mb-0">
                {{if .CozyPass}}
                {{t "Passphrase reset Help hint Cozy Pass"}}
                {{else}}
                {{t "Passphrase reset Help hint"}}
                {{end}}
              </p>
            </div>
            <span class="icon icon-right shrink-0"></span>
          </button>
        </form>
        {{end}}

        <form method="POST" action="/auth/passphrase_reset" class="d-contents">
          <input type="hidden" name="csrf_token" value="{{.CSRF}}" />
          <input type="hidden" name="redirect" value="{{.Redirect}}" />
          <input type="hidden" name="from" value="{{.From}}" />
          <button type="submit" class="alert d-flex align-items-center w-100 {{if .HasCiphers}}card-intent{{else}}alert-info{{end}}">
            <div class="me-3 flex-grow-1">
              <p class="text-start text-primary mb-2">
                {{if .HasCiphers}}
                {{t "Passphrase reset Submit"}}
                {{else}}
                {{t "Passphrase reset Submit emptyVault"}}
                {{end}}
              </p>
              {{if .HasCiphers}}
              <p class="text-start text-muted caption mb-2">
                {{t "Passphrase reset Help Message"}}
              </p>
              {{else}}
              <p class="text-start text-muted caption mb-0">
                {{if .CozyPass}}
                {{t "Passphrase reset Help emptyVault Cozy Pass"}}
                {{else}}
                {{t "Passphrase reset Help emptyVault"}}
                {{end}}
              </p>
              {{end}}
            </div>
            <span class="icon icon-right flex-shrink-0"></span>
          </button>
        </form>
      </div>

      <footer></footer>
    </main>
    <script src="{{asset .Domain "/scripts/cirrus.js"}}"></script>
  </body>
</html>
